<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态内容生成器</title>
    <link rel="stylesheet" href="../../demo/plugins/input-number/style.css">
    <link rel="stylesheet" href="../../demo/plugins/select/style.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #f0f2f5 0%, #e0e5ec 100%);
            color: #333;
            padding: 20px;
            box-sizing: border-box;
        }

        .container {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 900px;
            box-sizing: border-box;
            text-align: center;
            margin-bottom: 20px;
        }

        h1 {
            color: #2c3e50;
            margin-bottom: 20px;
            font-size: 2.5em;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
        }

        .controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .controls label {
            font-weight: bold;
            color: #555;
            margin-right: 5px;
        }

        .controls>div {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s ease, transform 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
        }

        .btn:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 5px rgba(0, 123, 255, 0.3);
        }

        .content-area {
            margin-top: 20px;
            border-top: 1px solid #eee;
            padding-top: 20px;
            text-align: left;
        }

        .content-area h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.8em;
        }

        .item-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .item-card {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .item-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .item-card img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #007bff;
        }

        .item-card h3 {
            margin: 0 0 8px 0;
            color: #34495e;
            font-size: 1.3em;
        }

        .item-card p {
            margin: 0;
            color: #666;
            font-size: 0.95em;
            line-height: 1.4;
        }

        .product-card {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: left;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .product-card h3 {
            margin: 0 0 10px 0;
            color: #34495e;
            font-size: 1.4em;
        }

        .product-card p {
            margin: 0 0 5px 0;
            color: #666;
            font-size: 0.95em;
        }

        .product-card .price {
            font-size: 1.2em;
            font-weight: bold;
            color: #e74c3c;
            margin-top: 10px;
        }

        .code-snippet {
            background-color: #2d2d2d;
            color: #f8f8f2;
            padding: 20px;
            border-radius: 8px;
            margin-top: 30px;
            text-align: left;
            overflow-x: auto;
            font-family: 'Fira Code', 'Consolas', 'Monaco', monospace;
            font-size: 0.9em;
            line-height: 1.5;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .code-snippet pre {
            margin: 0;
        }

        .code-snippet code {
            display: block;
        }

        .code-snippet .comment {
            color: #75715e;
        }

        .code-snippet .keyword {
            color: #66d9ef;
        }

        .code-snippet .function {
            color: #a6e22e;
        }

        .code-snippet .string {
            color: #e6db74;
        }

        .code-snippet .number {
            color: #ae81ff;
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
                align-items: center;
            }

            .container {
                padding: 20px;
            }

            h1 {
                font-size: 2em;
            }

            .btn {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>动态内容生成器</h1>
        <div class="controls">
            <div>
                <label for="itemCount">生成数量:</label>
                <div id="itemCountContainer"></div>
            </div>
            <div>
                <label for="contentType">内容类型:</label>
                <div id="contentTypeContainer"></div>
            </div>
            <button class="btn" id="generateBtn">生成内容</button>
            <button class="btn" id="resetBtn">重置</button>
        </div>

        <div class="content-area">
            <h2>生成结果</h2>
            <div id="output" class="item-grid"></div>
        </div>

        <div class="code-snippet">
            <h2>`generateItems` 核心代码片段</h2>
            <pre><code>
<span class="comment">// generateItems 函数：根据指定数量和处理函数生成数组</span>
<span class="keyword">const</span> <span class="function">generateItems</span> = (<span class="keyword">n</span>, <span class="function">handler</span>) =>
  <span class="function">Array</span>.<span class="function">from</span>({ <span class="keyword">length</span>: <span class="keyword">n</span> }, (<span class="keyword">_</span>, <span class="keyword">i</span>) => <span class="function">handler</span>(<span class="keyword">i</span>));
            </code></pre>
        </div>
    </div>

    <script src="../../demo/plugins/input-number/index.js"></script>
    <script src="../../demo/plugins/select/index.js"></script>
    <script>
        // generateItems 函数：根据指定数量和处理函数生成数组
        const generateItems = (n, handler) =>
            Array.from({ length: n }, (_, i) => handler(i));

        const generateBtn = document.getElementById('generateBtn');
        const resetBtn = document.getElementById('resetBtn');
        const outputDiv = document.getElementById('output');

        const itemCountInput = new InputNumber({
            value: 5,
            min: 1,
            max: 50,
            container: "#itemCountContainer"
        });
        const contentTypeSelect = new Select({
            placeholder: "选择内容类型",
            container: '#contentTypeContainer'
        });
        contentTypeSelect.setOptions([
            { label: '用户列表', value: 'users' },
            { label: '产品卡片', value: 'products' },
            { label: '随机数', value: 'random' }
        ]);

        contentTypeSelect.setValue('users');

        // 模拟数据生成函数
        const generateUserData = (index) => ({
            id: index + 1,
            name: `用户 ${index + 1}`,
            email: `user${index + 1}@example.com`,
            avatar: `https://picsum.photos/150?random=${index}`
        });

        const generateProductData = (index) => ({
            id: index + 1,
            name: `产品 ${index + 1}`,
            description: `这是关于产品 ${index + 1} 的详细描述，它具有出色的功能和设计。`,
            price: (Math.random() * 100 + 10).toFixed(2)
        });

        const generateRandomNumber = (index) => `随机数 ${index + 1}: ${Math.random().toFixed(4)}`;

        const renderUsers = (users) => {
            outputDiv.className = 'item-grid';
            outputDiv.innerHTML = users.map(user => `
                <div class="item-card">
                    <img src="${user.avatar}" alt="${user.name}">
                    <h3>${user.name}</h3>
                    <p>${user.email}</p>
                </div>
            `).join('');
        };

        const renderProducts = (products) => {
            outputDiv.className = 'item-grid';
            outputDiv.innerHTML = products.map(product => `
                <div class="product-card">
                    <h3>${product.name}</h3>
                    <p>${product.description}</p>
                    <p class="price">¥${product.price}</p>
                </div>
            `).join('');
        };

        const renderRandomNumbers = (numbers) => {
            outputDiv.className = 'item-grid'; // 可以调整为其他布局或直接文本显示
            outputDiv.innerHTML = numbers.map(num => `
                <div class="item-card" style="padding: 15px;">
                    <p>${num}</p>
                </div>
            `).join('');
        };

        const generateContent = () => {
            const count = itemCountInput.getValue();
            const type = contentTypeSelect.getValue();

            if (isNaN(count) || count <= 0) {
                alert('请输入有效的生成数量！');
                return;
            }

            let items;
            switch (type) {
                case 'users':
                    items = generateItems(count, generateUserData);
                    renderUsers(items);
                    break;
                case 'products':
                    items = generateItems(count, generateProductData);
                    renderProducts(items);
                    break;
                case 'random':
                    items = generateItems(count, generateRandomNumber);
                    renderRandomNumbers(items);
                    break;
                default:
                    outputDiv.innerHTML = '<p>请选择一个内容类型。</p>';
            }
        };

        const resetContent = () => {
            itemCountInput.setValue(5);
            contentTypeSelect.setValue('users');
            outputDiv.innerHTML = '<p>点击“生成内容”按钮开始生成。</p>';
            outputDiv.className = '';
        };

        generateBtn.addEventListener('click', generateContent);
        resetBtn.addEventListener('click', resetContent);

        // 初始加载时生成一次内容
        resetContent();
    </script>
</body>

</html>